import React, { useEffect, useState } from 'react';
import Store from './../redux/store';
import * as actions from './../redux/actions';
const About = () => {
  // const [number, setNumber] = useState(Store.getState().count)
  const [number, setNumber] = useState(Store.getState().a.count)

  useEffect(() => {
    const unSubscribe = Store.subscribe(() => {
      // setNumber(Store.getState().count)
      setNumber(Store.getState().a.count)

      console.log("Stroe's state is modify.")
    });
    return () => {
      unSubscribe(); // 取消订阅。
    }
  });
  return (
    <div>
      <h1>about view</h1>
      <h2>Count: {number}</h2>
      {/* 如果组件state,props没有变化，组件就不会重新渲染，就会导致JSX 语法中，不能重新获取store.state。就感觉store.state 的数据没有改变。所以，一般我们在使用redux时，不会直接在jsx 使用store.state的数据。而是给组件自己的状态赋值。 */}
      {/* <h2>Store.count: {Store.getState().count}</h2> */}
      <button type='button' onClick={() => {
        Store.dispatch(actions.addNum(10))
      }}>++</button>
      <button type='button' onClick={() => {
        Store.dispatch(actions.jianNum(10))
      }}>--</button>
    </div>
  );
}

export default About;
